<template>
	<view class="Imagebox">
		<image class="Image" 
		:src="item.vod_pic"
		mode="aspectFill"
		></image>
	
		
		
		
	</view>
	<view class="videotitle">
		<view class="title">
			<text class="title-text">{{item.vod_name}}</text>
		</view>
		
		<view class="desc">
			<view class="desc-item">
				<text class="desc-text jishu">{{item.vod_blurb}}</text>
			</view>
		</view>
	</view> 
</template>

<script>

export default {
	name: 'u-grid-three',
	props: {
		item:{
			type:Array,
			default:[]
		}
		
	},
	data() {
		return {
			index: 0,
		}
	},
	methods:{
		videoTap() {
			this.$emit('click', this.index);
		}
	}
};
</script>

<style scoped lang="scss">
	.Imagebox .Image,image{
		height: 296rpx;
		border-radius: 8rpx;
		width: 222rpx;
		
	}
	.topvip{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}
	.top-text,.top-text>text {
		padding: 0 8rpx;
		height: 40rpx!important;
		line-height: 40rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #2979ff;
		font-size: 28rpx!important;
		border-top-left-radius: 0;
		border-top-right-radius: 14rpx;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 14rpx;
	}
	.videotitle .desc{
		flex-wrap: nowrap!important;
		flex-direction: row!important;
		justify-content: space-between;
	}
	.videotitle,.title-text,.title,.desc{
		width: 222rpx!important;
		max-width: 222rpx!important;
	}
	
	.videotitle .desc .desc-item {
		width: 222rpx!important;
	}
	.bottom{
		position: absolute;
		bottom: 10rpx;
		right:12rpx;
		
	}
	.bottom-text,.bottom-text>text {
		padding-bottom: 10rpx;
		padding-right: 10rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	text,.title-text,.desc-text,.title,.desc {
		overflow: hidden;
		word-break: break-all;
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		lines:1;//NVUE下要用这个属性，来让文字超出隐藏变省略号
	}
	.title-text-first {font-size: 32rpx;}
	.desc-first {font-size: 24rpx;color: #747d8c;}
	.title-text {font-size: 32rpx;}
	.desc {font-size: 24rpx;color: #747d8c;}
</style>
